<template>
	<!--  物流订单详情 -->
	<view>
		<view class="head bg-white">
			<view class="name" @click="$utils.callphone(goods.address[0].phone)">
				<text>{{goods.address[0].name}}</text>
				<text class="phone">{{goods.address[0].phone}}</text>
			</view>
			<view class="address">{{goods.address[0].province+goods.address[0].city+goods.address[0].district+goods.address[0].address}}</view>
		</view>
		<view class="main">
			<view v-for="(item,index) in goods.goods" :key="index" class="item flex">
				<image :src="url+item.main_image" mode=""></image>
				<view class="text_div">
					<!-- 1待配送 2配送中 3已完成(待评价) 4退款中 5退款完成 7已评价 -1已取消 -2拒绝退款 -->
					<view class="name flex-cb ">
							<text class="text">{{item.title}} {{item.spec_item_name}}</text>
							<text class="tuikuan" v-if="index == isshow">{{goods.status==0?'待支付':goods.status==1?'待发货':goods.status==2?'运输中'
							:goods.status==3?'已完成(待评价)':goods.status==4?'退款中':goods.status==5?'退款完成':goods.status==7?'已评价':
							goods.status==-1?'已取消':'拒绝退款'}}</text>
					</view>
					<view class="pic flex justify-between">
						<text class="">原价:￥{{item.price}}</text>
						<text class="jifen">积分最多抵扣￥{{item.point_price||0}}</text>
					</view>
					<view class="numbar flex-cb">
						<text class="num_x">X{{item.number}}</text>
						<text>会员价:￥{{item.vip_price}}</text>
					</view>
				</view>
			</view>
			<view class="solid"></view>
			<view class="span">
				<view class="text_span " v-if="goods.discount_method==1">积分抵扣：￥{{goods.amount-goods.point_amount||0}}</view>
				<view class="text_span">商品数量：{{num}}</view>
				<view class="text_span">总价：￥{{goods.discount_method==0?goods.amount:goods.discount_method==1?goods.point_amount:goods.vip_amount}}</view>
			</view>
		</view>
		<view class="foot">
			<view class="ddxx">订单信息</view>
			<view class="solid"></view>
			<view class="span_div flex-cb">
				<view class="left">
					<view>订单编号</view>
					<view>下单时间</view>
					<view v-if="goods.pay_time">支付时间</view>
					<view v-if="goods.delivery_time">发货时间</view>
					<view v-if="goods.express_number">快递单号</view>
				</view>
				<view class="right">
					<view>{{goods.order_no}}</view>
					<view>{{goods.created_at}}</view>
					<view v-if="goods.pay_time">{{goods.pay_time}}</view>
					<view v-if="goods.delivery_time">{{goods.delivery_time}}</view>
					<view v-if="goods.express_number">{{goods.express_number}}</view>
				</view>
			</view>
		</view>
		<view class="foot foot2" v-if="goods.refund">
			<view class="ddxx">退款信息</view>
			<view class="solid"></view>
			<view class="span_div flex-cb">
				<view class="left">
					<view>退款金额</view>
					<view>退款时间</view>
					<view>退款类型</view>
					<view>{{goods.refund.status == 0?'退款':'拒绝'}}原因</view>
					<view v-if="goods.refund.image">退款截图</view>
				</view>
				<view class="right">
					<view>￥{{goods.refund.refund_amount}}</view>
					<view>{{goods.refund.created_at}}</view>
					<view v-for="i in typelist" :key="i" v-if="i.id == goods.refund.refund_type_id">{{i.name}}</view>
					<view>{{goods.refund.status == 0?goods.refund.refund_instruction||'无':goods.refund.reject_reason||'无'}}</view>
					<view v-if="goods.refund.image" class="cuIcon-right" @click="$utils.lookimg(url+goods.refund.image)"></view>
				</view>
			</view>
		</view>
		<view class="bottom bg-white flex align-center justify-end" :style="{paddingBottom:iphone/2 + 'rpx'}">
			<view class="button button1" v-if="goods.status == 1" @click="handlegoto(1)">填写运单编号</view>
			<view class="button button1" v-if="goods.status == 2" @click="handlegoto(2)">查看物流</view>
			<view v-else class="flex">
				<view class="button" @click="navigata" >联系买家</view>
				<view class="button button2" @click="handleNo" v-if="goods.status == 4">拒绝退款</view>
				<view class="button button1" v-if="goods.status == 4" @click="tytk">同意退款</view>
			</view>
		</view>
		<!-- 拒绝退款弹窗 -->
		<view class="modal_view foot_model flex-c" v-if="index == 1" >
			<view class="modal_div" >
				<view class="title">拒绝原因</view>
				<view class="name">
					<textarea value="" placeholder="请填写拒绝原因" v-model="text" />
				</view>
				<view class="button_min flex-cb">
					<view class="left" @click="index=0">取消</view>
					<view class="center"></view>
					<view class="right" @click="qd">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				index:0,
				isshow:0,
				text:'',//拒绝原因
				iphone:'',
				order_id:null,
				goods:'',
				num:0,
				typelist:[]
			};
		},
		onLoad(option) {
			if(option.id == 0){
				this.isshow = 1
			}
			this.url = this.$base
			this.order_id = option.id
			this.getgoods(this.order_id)
			this.iphone = getApp().globalData.iphone
			this.$api.refund_types({},this.order_id,1).then(res=>{
				console.log(res);
				this.typelist = res.data
			})
			
		},
		methods:{
			handlegoto(i){//查看物流
				if(i==2){
					uni.navigateTo({
					  url: "plugin://kdPlugin/index?num="+this.goods.express_number+'&appName='+'城帮食惠',
					})
				}else{
					uni.showModal({
						confirmColor:'#1CD699',
						editable:true,
						title:'填写运单编号',
						placeholderText:'请填写运单编号',
						success:(res)=>{
							if (res.confirm) {
								if(res.content == ''){
									this.$utils.showTips('运单编号不能为空')
								}else{
									this.$api.express_delivery_orders({
										express_number:res.content
									},this.order_id,1).then(res=>{
										if(res.code == 200001){
											this.getgoods(this.order_id)
										}
									})
								}
								
							}
						}
						
					})
				}
			},
			getgoods(id){
				this.$api.orders_details({},id,1).then(res=>{
					console.log(res);
					this.goods = res.data
					for (let i = 0; i < res.data.goods.length; i++) {
						this.num += this.goods.goods[i].number
					}
				})
			},
			navigata(){
				uni.navigateTo({
					url:'/pageA/chat?uid='+this.goods.uid //联系买家传1
				})
			},
			handleNo(){
				this.index = 1
			},
			qd(){//拒绝退款
				if(this.text == ''){
					uni.showToast({
						icon:"none",title:'请输入拒绝理由'
					})
				}
				this.$api.efund_orders({
					reject_reason:this.text
				},this.order_id,1).then(res=>{
					if(res.code == 200001){
						this.getgoods(this.order_id)
						this.index = 0
					}
				})
			},
			tytk(){
				this.$api.efund_orders_agree({},this.order_id,1).then(res=>{
					if(res.code == 200001){
						this.getgoods(this.order_id)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.head{
	width: 706rpx;
	height: 198rpx;
	border-radius: 20rpx;
	margin: 10rpx auto;
	padding: 30rpx 0 18rpx 22rpx;
	.name{
		font-size: 36rpx;
		color: #2F2F2F;
		font-weight: bold;
		.phone{
			font-size: 30rpx;
			color: #969696;
			font-weight: 400;
			margin-left: 22rpx;
		}
	}
	.address{
		width: 442rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
}
.main{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 26rpx 0;
	margin: auto;
	.item{
		margin-bottom: 61rpx;
		padding: 0 20rpx 0 27rpx;
		image{
			width: 136rpx;
			height: 136rpx;
		}
		.text_div{
			flex: 1;
			margin-left: 19rpx;
			font-size: 28rpx;
			color: #333333;
			.name{
				height: 40rpx;
				.text{
					height: 40rpx;
					font-weight: bold;
				}
				.tuikuan{
					font-size: 30rpx;
					font-weight: 500;
					color: #1CD699;
				}
			}
			.pic{
				height: 40rpx;
				margin-top: 20rpx;
				.jifen{
					color: #FF6F10;
					font-size: 24rpx;
				}
			}
			.numbar{
				text{
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FF2E2E;
				}
				.num_x{
					font-size: 30rpx;
					font-weight: 500;
					color: #999;
				}
			}
		}
	}

	.span{
		padding-top: 24rpx;
		.text_span{
			font-size: 30rpx;
			color: #666;
			padding: 0 25rpx;
			margin-bottom: 20rpx;
		}
	}
	
}
.foot{
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:  10rpx auto;
	.ddxx{
		height: 90rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding-left: 28rpx;
		padding-top: 20rpx;
	}
	.span_div{
		padding: 0 28rpx;
		margin-top: 29rpx;
		.left,.right{
			width: 120rpx;
			font-size: 30rpx;
			color: #666;
			line-height: 70rpx;
		}
		.right{
			width: 360rpx;
			text-align: right;
		}
	}
}
.foot2{
	margin-bottom: 170rpx;
}
.bottom{
	width: 100%;
	min-height: 107rpx;
	padding-right: 29rpx;
	padding-top: 24rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	.button{
		width: 210rpx;
		height: 70rpx;
		margin-left: 12rpx;
		background: #FF6F10;
		border-radius: 70rpx;
		font-size: 30rpx;
		line-height: 70rpx;
		text-align: center;
		color: #fff;
	}
	.button1{
		background: #1CD699;
	}
	.button2{
		background: #FF2E2E;
	}
}
.solid{
	width: 690rpx;
	margin: 0 8rpx;
}
.foot_model{
	.modal_div{
		width: 532rpx;
		height: auto;
		background: #F3F3F3;
		border-radius: 10rpx;
		padding-bottom: 117rpx;
		position: relative;
		.title{
			color: #070707;
			font-size: 26rpx;
			font-weight: 500;
			margin-top: 32rpx;
			margin-bottom: 52rpx;
			text-align: center;
		}
		.name{
			width: 472rpx;
			height: 219rpx;
			background: #F3F3F3;
			border-radius: 10rpx;
			border: 1rpx solid #DADADA;
			overflow: hidden;
			margin: auto;
			padding:20rpx;
			color: #B5B2B5;
			font-size: 24rpx;
			textarea{
				width: 100%;height: 100%;
			}
			
		}
		.button_min{
			position: absolute;
			bottom:0 ;
			left: 0;
			width: 100%;
			height: 78rpx;
			border-top: solid 1rpx #DADADA;
			.center{
				width: 1rpx;
				height: 66rpx;
				background: #DADADA;
				border-radius: 1rpx;
			}
			.left,.right{
				flex: 1;
				font-size: 26rpx;
				text-align: center;
			}
			.right{
				color: #1CD699;
			}
		}
	}
	
}
</style>
